import { Card, Table } from 'antd';
import { FormattedMessage } from 'umi';
import React,{ useRef } from 'react';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { TableListItem } from '../../../Plan/data.d';
import { eventList } from '../service';
import styles from '../style.less';

interface EventListProps {
  loading: boolean;
}
/**
 * 事件记录
 * @param props 
 */
const EventList: React.FC<EventListProps> = (props) => {

  const { loading } = props;

  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TableListItem>[] = [
    {
      title: '时间',
      dataIndex: 'updateDatetime',
      valueType: 'dateTime',
    },
    {
      title: '类型',
      dataIndex: 'type',
      valueType: 'text',
      valueEnum: {
        device: { text: '设备', status: 'Processing' },
        plan: { text: '计划', status: 'Success' },
        notice: { text: '公告', status: 'Warning' },
      },
    },
    {
      title: '简述',
      dataIndex: 'description',
      valueType: 'text',
      hideInSearch: true, 
    },
  ];
  return (
      <Card
        loading={loading}
        className={styles.salesCard}
        bordered={false}
        title={
          <FormattedMessage
            id="dashboardanddashboardanalysis.analysis.event"
            defaultMessage="The List of Event"
          />
        }
        style={{
          height: '100%',
        }}
      >
        <div>
        <ProTable<TableListItem>
          options={false}
          actionRef={actionRef}
          rowKey="key"
          search={false}
          pagination={{ showQuickJumper: true,defaultPageSize: 10 }}
          request={(params, sorter, filter) => eventList({ ...params, sorter, filter })}
          columns={columns}
        />
        </div>
      </Card>
  );
};

export default EventList;
